<template>
  <div>
    <div id="echart"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    //通过挂载实现组件一加载就渲染数据图表
    //给容器初始化
    let myChart = this.$echart.init(document.getElementById("echart"));
    //创建配置项
    let options = {
      title: {
        text: "不同月份流量展示",
      },
      xAxis: {
        type: "category",
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [1, 99, 40, 999, 700, 169, 260],
          type: "line",
        },
      ],
    };
    //设置配置项
    myChart.setOption(options);
  },
};
</script>

<style lang="stylus" scoped>
#echart {
  width: 800px;
  height: 600px;
}
</style>
